<template>
  <div id="teamAddPage">
    <van-form @submit="doAddTeam">
      <van-cell-group inset>
        <van-field
            v-model="addTeamData.name"
            required
            name="name"
            label="队伍名"
            placeholder="给队伍起个好听的名字"
            :rules="[{ required: true, message: '别忘了起队伍名' }]"
        />
        <van-field
            v-model="addTeamData.description"
            rows="2"
            autosize
            label="队伍描述"
            type="textarea"
            placeholder="介绍一下你的队伍吧"
        />
        <van-field
            is-link
            readonly
            required
            name="datetimePicker"
            label="过期时间"
            :placeholder="result ?? '设置队伍过期时间'"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
          <van-date-picker
              v-model="addTeamData.expireTime"
              :model-value="pickerValue"
              title="上下拖动选择时间"
              @confirm="onConfirm"
              @cancel="onCancel"
              :min-date="minDate"
          />
        </van-popup>
        <van-field required name="stepper" label="最大人数">
          <template #input>
            <van-stepper v-model="addTeamData.maxNum" min="2" max="10"/>
          </template>
        </van-field>
        <van-field required name="radio" label="队伍状态">
          <template #input>
            <van-radio-group v-model="addTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="2">加密</van-radio>
              <van-radio name="1">私有</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-if="addTeamData.status === '2'"
            v-model="addTeamData.password"
            type="password"
            required
            name="userPassword"
            label="队伍密码"
            placeholder="设置队伍密码"
            :rules="[{ required: true, message: '加密队伍必须要有密码' }]"
        />
      </van-cell-group>
      <van-divider />
      <div style="margin: 16px;" id="addTeamTwoButton">
        <van-button block round type="primary" @click="cancelAddTeam">
          取消创建
        </van-button>
        <van-button block round type="primary" native-type="submit">
          创建队伍
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import { ref } from "vue";
import myAxios from "../plugins/myAxios.ts";
import {showFailToast, showSuccessToast, showToast} from "vant";
import moment from "moment";

const router = useRouter();

// 新队伍默认值
const initFormData = {
  "name": "",
  "description": "",
  "expireTime": null, // 默认不过期
  "maxNum": 3, // 默认最大人数3
  "password": "",
  "status": '0', // 默认公开队伍
}

// 用户填写的创建队伍表单数据
const addTeamData = ref({...initFormData})

// 日期选择器
const minDate = new Date();
const showPicker = ref(false);
const result = ref();
const pickerValue = ref([]);
// @ts-ignore
const onConfirm = ({ selectedValues }) => {
  result.value = selectedValues.join('/');
  addTeamData.value.expireTime = selectedValues.join("-");
  pickerValue.value = selectedValues;
  showPicker.value = false;
};
const onCancel = () => {
  result.value = null;
  showPicker.value = false;
};

/**
 * 取消创建队伍
 */
const cancelAddTeam = () => {
  router.back();
  showToast('取消创建队伍')
}

/**
 * 创建队伍
 * @returns {Promise<void>}
 */
const doAddTeam = async () => {
  showToast('正在创建队伍 请稍候...');
  const postData = {
    ...addTeamData.value,
    status: Number(addTeamData.value.status),
    expireTime: moment(addTeamData.value.expireTime).format("YYYY-MM-DD"),
  }
  const res = await myAxios.post("/team/add", postData)
  // @ts-ignore
  if(res?.code === 0 && res.data) {
    showSuccessToast('创建队伍成功');
    router.back();
  } else {
    // @ts-ignore
    showFailToast('创建队伍失败' + (res.description ? `${res.description}` : ''));
  }
}

</script>


<style scoped>
#addTeamTwoButton {
  display: flex;
  justify-content: center;
}
</style>